Macrostruttura del layout
Layout a tre colonne con float e immagine di background
In questa lezione vedremo come realizzare un layout a tre colonne con i float e immagine di background. Come abbiamo detto precedentemente, se si sceglie questa tecnica le due colonne laterali devono precedere la colonna dei contenuti nel codice HTML.
Vediamo il codice minimale:
<body>
<div id="container">
<div id="container2">
<div id="header"></div>
<div id="navigation"></div>
<div id="extra"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
</body>
La colonna dei contenuti segue quindi quella di navigazione e quella degli extra.
Ma a che serve quel container2 alla terza riga delcodice? Sintetizzo ciò che dice "La guida ai layout con i CSS" di Alessandro Fulciniti: siccome è possibile assegnare ad un elemento una sola immagine di background, se vogliamo assegnare alle due colonne laterali due immagini di background distinte, conviene introdurre un secondo container (appunto, container2). In realtà, si potrebbe farne a meno assegnando la seconda immagine al body (nel caso limite in cui la pagina si estende almeno per tutta la lunghezza della finestra e si usi un layout fluido a larghezza totale), ma è comunque meglio disporre della seconda immagine di background introducendo il secondo contenitore, perchè così possiamo usare layout semifluidi, fissi o elastici senza dover ritoccare il codice HTML.
Sfortunatamente, ho letto la nota del doppio contenitore suggerita dall'autore dopo essere andato molto avanti con la costruzione del sito; e quindi purtroppo, per questo mio sito non sono ricorso al secondo contenitore, ma ho utilizzato uno stesso sfondo azzurro ("sfondo169_AzzurroCielo.jpg") per le due colonne laterali , e un colore bianco o celestino per la sezione dei contenuti.
Come pro-memoria personale (altrimenti a che cosa servirebbe questa sezione "Blocco Note"?), nell'ipotesi di un aggiornamento, debbo ricordarmi che ho messo lo "sfondo169_AzzurroCielo.jpg" nel contenitore generale #container nei seguenti file .css: a) "un prof, una panchina.css"; b) "merceologia.css", richiamato da merceologia tab.htm (la copertina de "I gruppi alimentari"); e nel body nei seguenti file.css: c) "B_bloccoNote.css; d) "mod1 per pagine merceologia.css"; e) "P_mario.css". Nell'ipotesi di una ristrutturazione, potrei seguire le indicazioni di cui sopra, e potrei raggruppare in uno o al massimo due file tutte le regole CSS del sito.
Scheda popup della macrostruttura del sito.
Ho preparato una scheda popup che simula un modello della macrostruttura del sito "Un prof, una panchina".
Tale modello riporta le caratteristiche principali del layout reale. L'altezza del modello è stata ridotta di molto per contenere in visualizzazione diretta (senza ricorre allo scroll bar verticale) anche la maggior parte delle regole CSS, relative allo stesso modello (come detto, quelle reali del sito sono distribuite su più file, e spero di raggrupparle e pubblicarle, assieme al codice html, al più presto.)
Per visualizzare la scheda popup con relativa macrostruttura e regole CSS del modello semplificato del sito, cliccare quì.
